/**
 * Created by ecervetti on 07/03/2014.
 */


var Graphics = function(contenerEle) {
    this.frames = {} ;
    this.contenerEle = contenerEle ;
    this.contenerEle.style.overflow = 'hidden' ;
    this.height = this.contenerEle.offsetHeight;
    this.width = this.contenerEle.offsetWidth;
};

/**
 *
 * @type {HTMLCanvasElement[]}
 */
Graphics.prototype  = {
    frames : null ,
    contenerEle : null ,
    width : 0,
    height : 0
} ;

/**
 *
 * @param indexFrame
 * @param zindex
 * @param [width]
 * @param [height]
 */
Graphics.prototype.addFrame = function(indexFrame,zindex,width,height) {
    var thisGraphics = this ;
    if(!width) width = thisGraphics.width ;
    if(!height) height = thisGraphics.height ;
    var ele = document.createElement("canvas");
    ele.style.width = width+'px' ;
    ele.style.height =height+'px' ;
    ele.style.position ="absolute" ;
    ele.style.top ="0px" ;
    ele.style.left ="0px" ;
    ele.style.marginLeft ="0px" ;
    ele.style.marginTop ="0px" ;
    //ele.style.imageRendering= "-webkit-optimize-contrast";
    ele.style.zIndex = zindex ;
    ele.width  = width ;
    ele.height = height ;
    thisGraphics.contenerEle.appendChild(ele);
    this.frames[indexFrame] = ele ;
    /*
     thisIHM.ctx = frame.getContext("2d");
     thisIHM.ctx.webkitImageSmoothingEnabled = false;
     thisIHM.ctx.imageSmoothingEnabled = false;
     thisIHM.ctx.webkitImageSmoothingEnabled = false;
     thisIHM.ctx.mozImageSmoothingEnabled = false;
     */
    return ele ;
};

/**
 *
 * @param indexFrame
 * @returns {CanvasRenderingContext2D}
 */
Graphics.prototype.getContextFromIndexFrame = function(indexFrame) {
    var thisGraphics = this ;
    return thisGraphics.frames[indexFrame].getContext("2d");
};
/**
 *
 * @param indexFrame
 * @param xstart
 * @param ystart
 * @param xend
 * @param yend
 * @param colorstart
 * @param colorend
 */
Graphics.prototype.drawGradientTwoColors = function(indexFrame,xstart,ystart,xend,yend,colorstart,colorend) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.fillStyle=thisGraphics.getGradientTwoColors(indexFrame,xstart,ystart,xend,yend,colorstart,colorend);
    ctx.fillRect(Math.round(xstart),Math.round(ystart),Math.round(xend-xstart),Math.round(yend-ystart));
};

/**
 *
 * @param indexFrame
 * @param xstart
 * @param ystart
 * @param xend
 * @param yend
 * @param colorstart
 * @param colorend
 * @returns {CanvasGradient}
 */
Graphics.prototype.getGradientTwoColors = function(indexFrame,xstart,ystart,xend,yend,colorstart,colorend) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    var grd=ctx.createLinearGradient(Math.round(xstart),Math.round(ystart),Math.round(xend),Math.round(yend));
    grd.addColorStop(0,colorstart);
    grd.addColorStop(1,colorend);
    return grd ;
};

/**
 *
 * @param indexFrame
 * @param xstart
 * @param width
 */
Graphics.prototype.vignette = function(indexFrame,xstart,width) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.fillStyle="black";
    ctx.fillRect(0,0,xstart,thisGraphics.height);
    ctx.fillRect(xstart+width,0,thisGraphics.width-xstart,thisGraphics.height);
    var cx = Math.round(xstart + width/2) ;
    var cy = Math.round(thisGraphics.height/2) ;
    var grd = ctx.createRadialGradient(cx,cy,40, cx, cy, width);
    grd.addColorStop(0, "rgba(0,0,255,0)");
    grd.addColorStop(0.5, "rgba(0,0,0,0)");
    grd.addColorStop(0.7, "rgba(0,0,0,1)");
    grd.addColorStop(1, "black");
    var scaleY = thisGraphics.height/width ;
    ctx.setTransform(1,0,0,scaleY,0,(thisGraphics.height/2)*(1-scaleY));
    ctx.fillStyle = grd;
    ctx.fillRect(xstart,0,width,thisGraphics.height);
};

/**
 *
 * @param indexFrame
 * @param x
 * @param y
 * @param width
 * @param height
 */
Graphics.prototype.clearRect = function(indexFrame,x,y,width,height) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.clearRect(Math.round(x),Math.round(y),Math.round(width),Math.round(height));
};
/**
 *
 * @param indexFrame
 * @param ressource
 * @param x
 * @param y
 * @param width
 * @param height
 * @param [height]
 */
Graphics.prototype.drawImage = function(indexFrame,ressource,x,y,width,height,alpha) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    if(!alpha) alpha = 1 ;
    ctx.globalAlpha = alpha ;
    ctx.drawImage(ressource,Math.round(x),Math.round(y),Math.round(width),Math.round(height));
};

Graphics.prototype.drawRect = function(indexFrame,x,y,width,height,colorIn,colorOut,lineOutThiness,alpha) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.fillStyle = colorIn ;
    ctx.globalAlpha = alpha ;
    ctx.fillRect(Math.round(x),Math.round(y),Math.round(width),Math.round(height));
    if(lineOutThiness>0){
        ctx.strokeStyle = colorOut ;
        ctx.lineWidth = lineOutThiness ;
        ctx.strokeRect(x,y,width,height);
    }
};

/**
 *
 * @param indexFrame
 * @param text
 * @param x
 * @param y
 * @param fontinfo
 * @param colorIn
 * @param colorOut
 * @param lineOutThiness
 * @param alpha
 */
Graphics.prototype.drawText = function(indexFrame,text,x,y,fontinfo,colorIn,colorOut,lineOutThiness,alpha) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.fillStyle = colorIn ;
    ctx.globalAlpha = alpha ;
    ctx.font=fontinfo;
    ctx.fillText(text,Math.round(x),Math.round(y));
    if(lineOutThiness>0){
        ctx.strokeStyle = colorOut ;
        ctx.lineWidth = lineOutThiness ;
        ctx.strokeText(text,Math.round(x),Math.round(y));
    }
};


Graphics.prototype.drawQuadratic = function(indexFrame,x1,y1,x2,y2,x3,y3,colorIn,colorOut,lineOutThiness,alpha) {
    var thisGraphics = this ;
    var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
    ctx.fillStyle = colorIn ;
    ctx.globalAlpha = alpha ;
    //Trajectoire
    ctx.beginPath();
    ctx.moveTo(Math.round(x1),Math.round(y1));
    ctx.quadraticCurveTo(Math.round(x2),Math.round(y2),Math.round(x3),Math.round(y3));
    if( colorIn ) {
        ctx.fillStyle = colorIn ;
        ctx.fill();
    }

    if(lineOutThiness>0){
        ctx.strokeStyle = colorOut ;
        ctx.lineWidth = lineOutThiness ;
        ctx.stroke();
    }
};

    Graphics.prototype.drawSegments = function(indexFrame,tabCoords,colorIn,colorOut,lineOutThiness,alpha) {
        var thisGraphics = this ;
        var ctx = thisGraphics.getContextFromIndexFrame(indexFrame);
        ctx.fillStyle = colorIn ;
        ctx.globalAlpha = alpha ;
        //Trajectoire
        ctx.beginPath();
        ctx.moveTo(Math.round(tabCoords[0].x),Math.round(tabCoords[0].y));
        for(var i = 0 ; i< tabCoords.length;i++) {
            ctx.lineTo(Math.round(tabCoords[i].x),Math.round(tabCoords[i].y));
        }
        if( colorIn ) {
            ctx.fillStyle = colorIn ;
            ctx.fill();
        }
        if(lineOutThiness>0){
            ctx.strokeStyle = colorOut ;
            ctx.lineWidth = lineOutThiness ;
            ctx.stroke();
        }
    };